 <template>
  <div>
    <el-form ref="formData" :model="formData" label-width="140px">
      <el-form-item label="名称">
        <el-input class="input-width" v-model="formData.name" placeholder="请输入标题"></el-input>
      </el-form-item>

      <el-form-item label="封面">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          accept=".gif, .jpg, .jpeg, .bmp, .png"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :data="token"
        >
          <img v-if="formData.logo" :src="formData.logo" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="场景语言">
        <el-checkbox
          v-for="(item, index) in languageList"
          :label="item.name"
          :key="index"
          v-model="item.checked"
          v-show="isShowAllItem || item.checked"
          @change="changeLangList(item.checked, index)"
        >
          <span>{{item.name}}</span>
        </el-checkbox>
        <el-button
          class="el-icon-edit"
          style="border-radius: 25px;font-size:14px;padding:10px;"
          @click="isShowAllItem = !isShowAllItem"
        >{{isShowAllItem ? ' 仅显示已选中' : ' 显示所有'}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getToken } from "src/util/auth";
import { getQiNiuToken, getAudioToken } from "src/util/uploadToken";
import {
  huaweiuploadUrl,
  quniuUploadUrl,
  quniudownHost,
  uploadUrl,
  quniuAudioDownHost
} from "src/config/env.js"; // [华为云] [七牛云] [下载地址] [七牛云下载地址] [本地图片上传]

export default {
  data() {
    return {
      checked: true,
      token: { token: "" },
      isShowAllItem: true, //是否显示所有语言
      // formData: {
      //   name: "", //场景名称
      //   logo: "", // 封面地址
      //   languages: []
      // },
      checkAll: false,
      // languageList: [],  //选择的语言列表
      uploadUrl: quniuUploadUrl
    };
  },
  props: ["formData", "languageList"],
  mounted() {
    this.token.token = getQiNiuToken();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      let img = quniudownHost + res.key + "/wm.jpg";
      this.formData.logo = img;
    },
    changeLangList(isChecked, index) {
      if (!isChecked) {
        this.$confirm("去掉当选选项会丢失已上传数据，确定去掉吗？")
          .then(
            _ => {
              this.filterData();
            },
            _ => {
              this.languageList[index].checked = true;
              retrun;
            }
          )
          .catch(_ => {});
      } else {
        this.filterData();
      }
    },
    filterData() {
      this.formData.languages = this.languageList.filter(item => item.checked);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.longTerm-style {
  color: #888;
  padding: 10px;
}

.input-width {
  width: 400px;
}
.upload-width {
  width: 400px;
}
.cascader-style {
  width: 300px;
  margin-bottom: 20px;
}

.widthBtn {
  width: 200px;
  margin: 20px 200px 0 0;
}
//----------------封面上传---------------
.avatar-uploader {
  // border: 1px dashed #d9d9d9;
  // border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px dotted #f1f1f1;
  border-radius: 10px;
  width: 140px;
  height: 140px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 40px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
.avatar {
  width: 140px;
  height: 140px;
  display: block;
}
//----------------封面上传---------------
</style>
